<template>
<div>
  <el-button class="exportButton" type="primary" round @click="exportData">导出</el-button>
  <el-button type="text" @click="importButton">导入</el-button>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
    <el-upload
    class="upload-demo"
    drag
    action="http://localhost:88/api/base/dict/importData"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传excel文件，且不超过10m</div>
  </el-upload>
</el-dialog>

    <el-table :data="dictList" style="width: 100%" row-key="id" border lazy :load="loadData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="dictCode" label="字典code">
        </el-table-column>
        <el-table-column prop="value" label="字典值">
        </el-table-column>
    </el-table>
</div>
</template>

<script>
import dictApi from "@/api/dict/dict";
export default {
  data () {
    return {
      dictList:[],
      dialogVisible:false
    };
  },
  created(){
    this.findByParentId(1)
  },
  methods: {
    importButton(){
      this.dialogVisible = true
    },
    handleClose(){

    },
    exportData(){
      window.location.href = "http://localhost:88/api/base/dict/exportData"
    },
    findByParentId(id){
      dictApi.findByParentId(id).then(res=>{
        console.log("res:",res)
        this.dictList = res.result
      })
    },
    loadData(tree, treeNode, resolve) {
      dictApi.findByParentId(tree.id).then(res=>{
        console.log("res:",res)
        resolve(res.result)
      })
    }
  }
}

</script>

<style>
.exportButton{
  margin:10px;
}
</style>